<template>
  <div class="comprehensive_main">
    <ComLeft/>
    <ComRight/>
    <ComBottom/>
    <ModalSquare v-if="details" @hidden="hidden">
      <Details :data="presentData"/>
    </ModalSquare>
    <Modal v-if="regulatory" @hidden="hidden1">
      <Regulatory :data="presentData" v-if="qrcode" @initiate="initiate"/>
      <Risk :data="presentData" v-if="risk" @synergy="synergy=true"/>
      <Synergy v-if="synergy" @closesy="closesy"/>
    </Modal>
    <ModalSquare v-if="lifecycle" @hidden="hidden2">
      <LifeCycle :data="presentData" />
    </ModalSquare>
    <ModalSquare v-if="lifecycle01" @hidden="hidden02">
      <LifeCycleCopy :data="presentData" />
    </ModalSquare>
  </div>
</template>
<script>
import ComLeft from './left.vue'
import ComRight from './right.vue'
import ComBottom from './bottom.vue'
import ModalSquare from '@/components/ModalSquare.vue'
import Details from './Details.vue'
import Modal from '@/components/Modal.vue'
import Regulatory from './components/Regulatory.vue'
import Risk from './components/Risk.vue'
import Synergy from './components/Synergy.vue'
import LifeCycle from './components/LifeCycle.vue'
import LifeCycleCopy from './components/LifeCycleCopy.vue'
import { datalist } from '@/data.js'

export default {
  name: 'Comprehensive',
  components: {
    ComLeft,
    ComRight,
    ComBottom,
    ModalSquare,
    Details,
    Modal,
    Regulatory,
    Risk,
    Synergy,
    LifeCycle,
    LifeCycleCopy
  },
  data () {
    return {
      details: false,
      regulatory: false,
      qrcode: true,
      risk: false,
      synergy: false,
      lifecycle: false,
      lifecycle01: false,
      presentData: null
    }
  },
  mounted () {
    if (!this.$root.MapGd) {
      this.$router.push('/')
      return
    }
    this.$root.MapGd.clearMap()
    this.gdmap()
    window.vm = this
  },
  methods: {
    opencs (index, id) {
      for (const elem of datalist.values()) {
        if (elem.id === id.toString()) {
          this.presentData = elem
          break
        }
      }
      if (index === 2) {
        this.details = true
      } else if (index === 1) {
        this.regulatory = true
      } else if (index === 3) {
        this.lifecycle = true
      }
    },
    hidden () {
      this.details = false
    },
    hidden1 () {
      this.regulatory = false
      this.qrcode = true
      this.risk = false
      this.synergy = false
    },
    hidden2 () {
      this.lifecycle = false
    },
    hidden02 () {
      this.lifecycle01 = false
    },
    initiate () {
      this.qrcode = false
      this.risk = true
    },
    closesy () {
      this.synergy = false
    },
    gdmap () {
      // window.addEventListener('hashchange', (event) => { console.log(event) })
      let map = this.$root.MapGd
      // 窗体
      function createInfoWindow (data) {
        let content = `<div style='color: aqua;width: 23.875rem;border: solid 2px #A0F487;border-radius: 5px;padding:1rem'>
              <p class="font_s22" style="color:#5AD834">| ${data.mc}</p>
              <p>
                <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/02.png" alt="">&nbsp;&nbsp;
                <span class="Regular font_s18 colorF">公墓地址：${data.dz} </span>
              </p>
              <p>
                <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/03.png" alt="">&nbsp;&nbsp;
                <span class="Regular font_s18 colorF">开办时间：${data.ksrq}</span>
              </p>
              <p>
                <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/04.png" alt="">&nbsp;&nbsp;
                <span class="Regular font_s18 colorF">负 责 人 ：${data.fzr}</span>
              </p>
              <p>
                <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/05.png" alt="">&nbsp;&nbsp;
                <span class="Regular font_s18 colorF">社会信用代码号：<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;91310115676253729p</span>
              </p>
              <ul class="flex colorF textC" style="padding:0.5rem 0">
                <li class="flex1" style="border: solid 2px #EF8264;border-radius:3px;background:rgba(239,130,100,0.5);margin-right:0.5rem;">
                  <p class="font_s20" style="line-height: 2rem;">${data.xydj}</p>
                  <p class="font_s16">信用等级</p>
                </li>
                <li class="flex1" style="border: solid 2px #7D649E;border-radius:3px;background:rgba(125,100,158,0.5);margin-right:0.5rem;">
                  <p class="font_s20" style="line-height: 2rem;">${data.xyf}</p>
                  <p class="font_s16">信用分</p>
                </li>
                <li class="flex1" style="border: solid 2px #94E7B7;border-radius:3px;background:rgba(148,231,183,0.5);margin-right:0.5rem;">
                  <p class="font_s20" style="line-height: 2rem;">${data.fxdj}</p>
                  <p class="font_s16">风险等级</p>
                </li>
                <li class="flex1" style="border: solid 2px #FFCD79;border-radius:3px;background:rgba(255,205,121,0.5);">
                  <p class="font_s20" style="line-height: 2rem;">${data.jgdj}</p>
                  <p class="font_s16">机构等级</p>
                </li>
              </ul>
              <p class="font_s18 flex JustifyContentSA" style="color: #5AD834;"><span onclick="window.vm.opencs(1,${data.id})">发起监管</span><span onclick="window.vm.opencs(2,${data.id})">详细信息</span><span onclick="window.vm.opencs(3,${data.id})">监管生命周期</span></p>
            </div>`
        var info = document.createElement('div')
        info.className = 'custom-info input-card content-window-card'

        var middle = document.createElement('div')
        middle.className = 'info-middle'
        middle.style.backgroundColor = 'rgba(0,0,0,0.5)'
        middle.innerHTML = content
        info.appendChild(middle)
        return info
      }
      // 创建点
      // console.log(datalist)
      for (const elem of datalist.values()) {
        let arr = []
        arr.push(elem.jd)
        arr.push(elem.wd)
        elem.lnglat = arr
      }
      let infoWindow = new AMap.InfoWindow({ isCustom: true, offset: new AMap.Pixel(0, -30) })
      for (let i = 0, marker; i < datalist.length; i++) {
        marker = new AMap.Marker({
          position: datalist[i].lnglat,
          icon: datalist[i].type === '1' ? `${process.env.BASE_URL}img/01.png` : `${process.env.BASE_URL}img/08.png`,
          map: map
        })
        marker.content = createInfoWindow(datalist[i])
        marker.on('click', markerClick)
        marker.emit('click', { target: marker })
      }
      function markerClick (e) {
        infoWindow.setContent(e.target.content)
        if (e.pixel) { // 初始不打开弹窗
          infoWindow.open(map, e.target.getPosition())
        }
      }
      map.setFitView()
    }
  }
}
</script>
<style lang="scss" scoped>
.comprehensive_main{
  height: 0;
}
</style>
